<style media="screen">
  #withdrawFLow .block-title {
    font-weight: 500;
    font-size: 14px;
    color: #929BA8;
    height: 40px;
    line-height: 40px;
  }
</style>
<section id="withdrawFLow">
  <ul class="contract-flow-nav">
    <li :class="{active:item.iscur}" v-for="(item,index) in nav" @click="switchNav(item,index)">{{item.name}}</li>
    <span class="nav-title">我的流程-退租详情</span>
  </ul>

  <div class="layout">
    <!--退租信息-->
    <section v-show="loadWithdrawMesModule">
      <!-- 基本信息 -->
      <div>
        <h4 class="block-title">基本信息</h4>
        <div class="row">
          <div class="col-md-1 title">退租时间：</div>
          <div class="col-md-9 item">
            {{data.withdrawDate | formatDate}}
          </div>
        </div>
        <div class="row">
          <div class="col-md-1 title">退租单号：</div>
          <div class="col-md-9 item">{{data.wCode}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 title">状态：</div>
          <div class="col-md-9 item color-orange">
            {{auditState | auditState}}
          </div>
        </div>
        <div class="row">
          <div class="col-md-1 title">合同编号：</div>
          <div class="col-md-3 item">
            <a :href="'#/contractNewDeatil?id='+data.contractId+'&ddtab=true'" target="_blank">{{contratdata.cCode}}</a>
          </div>
          <div class="col-md-1 title">管理编号：</div>
          <div class="col-md-3 item">
            <a :href="'#/contractNewDeatil?id='+data.contractId+'&ddtab=true'" target="_blank">{{contratdata.mCode}}</a>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2 title">合同名称：</div>
          <div class="col-md-10 item">{{contratdata.contractName ? contratdata.contractName : '--'}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 title">租户名称：</div>
          <div class="col-md-9 item">{{contratdata.zlfCompany}}</div>
        </div>
      </div>
      <!-- 出租资源 -->
      <div class="rent-resource">
        <h4 class="block-title">出租资源</h4>
        <!-- 单元 -->
        <div v-if="building.length">
          <div class="clearfix line-height-34">
            <div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
            <div class="pull-right cursor" @click="checkDetailMes('unit')">
              <span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
              <span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
              <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
              <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
            </div>
          </div>
          <div class="unit-table" v-if="unitOpenFlag">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-2">项目</div>
              <div class="dy-fx-2">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-4">单元</div>
            </div>
            <div class="tb-content">
              <ul class="dy-flex project-cr">
                <li class="dy-fx-2 project">{{contratdata.projectName}}</li>
                <li class="dy-fx-7">
                  <!-- 楼栋 -->
                  <ul class="dy-flex building-cr" v-for="(item,index) in building">
                    <li class="dy-fx-2 building">{{item.buildingName}}</li>
                    <li class="dy-fx-5">
                      <!-- 楼层 -->
                      <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                        <li class="dy-fx-1 floor">{{item1.floorName}}</li>
                        <li class="dy-fx-4 unit">
                          <!-- 单元 -->
                          <b v-for="(item2,index2) in item1.unit" @click="getUnitDetails(item1.unitId[index2])"><a href="javascript:;">{{item2}}</a><i v-if="index2 + 1 !== item1.unit.length">、</i></b>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 工位 -->
        <div v-if="wp.length">
          <div class="clearfix line-height-34">
            <div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
            <div class="pull-right cursor" @click="checkDetailMes('wp')">
              <span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
              <span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
              <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
              <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
            </div>
          </div>
          <div class="position-table border" v-if="wpOpenFlag">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-3">项目</div>
              <div class="dy-fx-3">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-1">单元</div>
              <div class="dy-fx-1">工位数</div>
              <div class="position-item">工位</div>
            </div>
            <ul class="tb-content">
              <li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId" :floorId="item.floorId" :unitId="item.unitId">
                <div class="dy-fx-3">{{contratdata.projectName}}</div>
                <div class="dy-fx-3">{{item.buildingName}}</div>
                <div class="dy-fx-1">{{item.floorName}}</div>
                <div class="dy-fx-1">{{item.unitName}}</div>
                <div class="dy-fx-1">{{item.num}}</div>
                <div class="position-item">
                  <span class="position">
                          <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
                        </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 车位 -->
        <div v-if="st.length">
          <div class="clearfix line-height-34">
            <div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
            <div class="pull-right cursor" @click="checkDetailMes('st')">
              <span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
              <span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
              <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
              <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
            </div>
          </div>
          <div class="position-table border" v-if="stOpenFlag">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-3">项目</div>
              <div class="dy-fx-3">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-1">单元</div>
              <div class="dy-fx-1">车位数</div>
              <div class="position-item">车位</div>
            </div>
            <ul class="tb-content">
              <li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId" :floorId="item.floorId" :unitId="item.unitId">
                <div class="dy-fx-3">{{contratdata.projectName}}</div>
                <div class="dy-fx-3">{{item.buildingName}}</div>
                <div class="dy-fx-1">{{item.floorName}}</div>
                <div class="dy-fx-1">{{item.unitName}}</div>
                <div class="dy-fx-1">{{item.num}}</div>
                <div class="position-item">
                  <span class="position">
                          <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
                        </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 应收部分 -->
      <div class="mt-10 border-t">
        <h4 class="block-title">应收部分</h4>
        <div class="hire-amount">
          <ul>
            <li class="clearfix line-height-34 color-999" v-if="item.paymentType == 'R'" v-for="item in data.expenses">
              <span class="pull-left mr-10">{{item.name}}：</span>
              <span class="pull-left color-666">{{item.amount | formatNum}}</span> 元
              <b class="ml-10" v-if="item.memo">(备注：{{item.memo}})</b>
            </li>
            <li class="clearfix line-height-34">
              <span class="pull-left mr-10 color-primary">应收合计：</span>
              <span class="pull-left color-primary">{{data.amountReceived | formatNum}}</span>元
            </li>
          </ul>
        </div>
      </div>
      <!-- 应退部分 -->
      <div class="mt-10 border-t">
        <h4 class="block-title">应退部分</h4>
        <div class="hire-amount">
          <ul>
            <li class="clearfix line-height-34 color-999" v-if="item.paymentType == 'W'" v-for="item in data.expenses">
              <span class="pull-left mr-10">{{item.name}}：</span>
              <span class="pull-left color-666">{{item.amount | formatNum}}</span> 元
            </li>
            <li class="clearfix line-height-34">
              <span class="pull-left mr-10 color-primary">应退合计：</span>
              <span class="pull-left color-primary">{{data.amountRefund | formatNum}}</span>元
            </li>
          </ul>
        </div>
      </div>
      <!-- 费用合计 -->
      <div class="mt-10 border-t">
        <h4 class="block-title">费用合计</h4>
        <div class="hire-amount">
          <ul>
            <li class="clearfix line-height-34">
              <span class="pull-left mr-10 color-primary">费用合计：</span>
              <span class="pull-left color-primary">{{Math.abs(data.amountReceived-data.amountRefund).toFixed(2) | formatNum}}</span>元
              <span v-if="data.amountReceived-data.amountRefund > 0">(应收)</span>
              <span v-if="data.amountReceived-data.amountRefund < 0">(应退)</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 退租原因 -->
      <div class="mt-10 border-t hire-cause">
        <h4 class="block-title">退租原因</h4>
        <div class="hire-amount">{{data.reason}}</div>
      </div>
      <!-- 待办事项 -->
      <div class="mt-10 border-t">
        <h4 class="block-title">待办事项</h4>
        <ul class="todoList clearfix">
          <li v-for="(item,index) in data.todoList">
            <span>{{index + 1}}、</span>
            <span>{{item}}</span>
          </li>
        </ul>
      </div>
      <!-- 存档图片 -->
      <div class="mt-10 border-t hire-image">
        <h4 class="block-title">存档图片</h4>
        <ul class="clearfix">
          <li v-for="(item, index) in data.pics" @click="bigPicShow(data.pics, index)">
            <img :src="item" alt="">
          </li>
        </ul>
      </div>
      <!-- 备注 -->
      <div class="mt-10 border-t hire-other pb-10">
        <h4 class="block-title">备注</h4>
        <div class="memo">{{data.memo}}</div>
      </div>
      <!-- 审核 -->
      <!--退租审核页面、待业务审核或者待财务审核状态下显示审核按钮-->
      <button class="n-btn-primary btn mr-10 audit-pass" v-if="(flowState && auditState === 'WBP') || (flowState && auditState === 'WCP')" @click="passAudit">
                审核通过
            </button>
      <button class="n-btn-outline btn audit-no-pass mr-10" v-if="(flowState && auditState === 'WBP') || (flowState && auditState === 'WCP')" @click="notPassAudit">审核不通过
            </button>
      <!--退租详情页面、流程状态为'进行中'且用户为流程的启动者可以撤回-->
      <button class="btn n-btn-primary mr-5" v-if="bpm.state === 'ON' && userid === bpm.starterId && !flowState" @click="withdrawCH">撤回
            </button>
      <button class="btn n-btn-outline" v-if="bpm.state === 'ON' && userid === bpm.starterId && !flowState" @click="cuiban">催办
            </button>
    </section>
    <!--流程信息-->
    <section v-show="loadFlowMesModule">
      <div class="border-b pb-10">
        <h4 class="block-title">流程信息</h4>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">流程编号：</div>
          <div class="col-md-9 item">{{bpm.bpmNo}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">耗时：</div>
          <div class="col-md-9 item">{{calculateTimeDifference(bpm.startTime,bpm.endTime)}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">发起人：</div>
          <div class="col-md-9 item">{{bpm.starterName | formatUndefined}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">发起时间：</div>
          <div class="col-md-3 item">{{bpm.startTime | formatDetailDate}}</div>
        </div>
        <div class="row" v-if="bpm.userName">
          <div class="col-md-1 liuceng-title color-999">当前处理人：</div>
          <div class="col-md-9 line-height-34 pl-0">{{bpm.userName | formatUndefined}}</div>
        </div>
        <div class="row" v-if="bpm.currPhase">
          <div class="col-md-1 liuceng-title color-999">当前处理节点：</div>
          <div class="col-md-9 item">{{bpm.currPhase}}</div>
        </div>
      </div>

      <div class="pb-10 border-b">
        <h4 class="block-title">流程图</h4>
        <div class="business-liuceng-image-cr">
          <div class="content">
            <div class="flowlist-image">
              <div class="begin-circle">开始</div>
              <div class="middle-node-container relative">
                <ul class="middle-node-wrapper clearfix">
                  <li class="node-item" v-for="(item,index) in flowNode">
                    <div class="node-order">
                      <span>{{index + 1}}</span>
                    </div>
                    <div class="node-name">{{item.name}}</div>
                    <p class="person" v-if="item.userNames.length">{{item.userNames.join('/')}}</p>
                  </li>
                </ul>
              </div>
              <div class="end-circle">结束</div>
            </div>
          </div>
        </div>
      </div>

      <div class="pb-10" v-if="bpmList.length">
        <h4 class="block-title">处理历史</h4>
        <div class="deal-history-table box-i-shadow-1 br-4">
          <div class="table-title">
            <div class="table-item1">时间</div>
            <div class="table-item2">处理人</div>
            <div class="table-item3">操作说明</div>
            <div class="table-item4">信息</div>
          </div>
          <ul class="table-content" v-for="item in bpmList">
            <li class="table-item1">{{item.endTime | formatDetailDate}}</li>
            <li class="table-item2">{{item.fnUserName | formatUndefined}}</li>
            <li class="table-item3">{{item.taskName | formatUndefined}}</li>
            <li class="table-item4">{{item.memo | formatUndefined}}</li>
          </ul>
        </div>
      </div>
    </section>

    <!--文件信息-->
    <section v-show="loadxdFlowMesModule">
      <div class="contract-file-container">
        <div class="upload-head-contract clearfix border-b pb-10">
          <div class="pull-left font-16 line-height-34">文件列表</div>
        </div>
        <div>
          <ul>
            <li class="clearfix border-b" v-for="(item,index) in data.fileNames">
              <p class="icon-Nav-contract-file file-name">
                <span>{{item}}</span>
              </p>
              <p class="pull-right line-height-45 file-btn dy-flex opera-but" style="align-items: center;height: 45px">
                <a class="icon-GM-preview" @click="previewImage(data.files[index])">
                        <b>预览</b>
                    </a>
                <span class="block-D-P-D"></span>
                <a :href="data.files[index]" :download="item.name" class="icon-Gm-download">
                        <b>下载</b>
                    </a>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>

  <!-- 单元详情 -->
  <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
</section>
<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/withdraw_flow.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
